<%@ page import="xyz.qduwo.entity.UserEntity" %>
<%@ page import="xyz.qduwo.dao.UserDao" %>
<%@ page import="java.util.List" %>
<%@ page import="xyz.qduwo.entity.CanvasEntity" %>
<%@ page import="xyz.qduwo.dao.CanvasDao" %>
<%@ page import="xyz.qduwo.dao.CategoryDao" %>
<%@ page import="xyz.qduwo.entity.CatgoryEntity" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    List<CatgoryEntity> catgoryEntities = CategoryDao.findAll();
    session.setAttribute("catgoryEntities",catgoryEntities);
    List<CanvasEntity> canvasEntities = new CanvasDao().listuserimage((UserEntity) session.getAttribute("userentity"));
    session.setAttribute("canvas",canvasEntities);
    UserEntity user = (UserEntity)session.getAttribute("userentity");
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/verifyCode.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/BrowserUtil.js"></script>
    <script src="js/verifyCode.js"></script>
    <style>
        .border {
            cursor: pointer;
            box-sizing: border-box;
            position: relative;
            background: black;
            background-image: -webkit-linear-gradient(top right, #5D5D5B, #383838);
            background-image: linear-gradient(top right, #5D5D5B, #383838);
            padding: 7px;
            width: 287px;
            height: 165px;
            margin-top: 1em;
            margin-left: 0.5em;
            /*box-shadow: -1px 1px var(--blur) 1px rgba(0, 0, 0, 0.1), -2px 2px var(--blur) 1px rgba(0, 0, 0, 0.09), -3px 3px var(--blur) 1px rgba(0, 0, 0, 0.08), -4px 4px var(--blur) 1px rgba(0, 0, 0, 0.07), -5px 5px var(--blur) 1px rgba(0, 0, 0, 0.06), -6px 6px var(--blur) 1px rgba(0, 0, 0, 0.05), -7px 7px var(--blur) 1px rgba(0, 0, 0, 0.04), -8px 8px var(--blur) 1px rgba(0, 0, 0, 0.03), -9px 9px var(--blur) 1px rgba(0, 0, 0, 0.03), -10px 10px var(--blur) 1px rgba(0, 0, 0, 0.03), -11px 11px var(--blur) 1px rgba(0, 0, 0, 0.03), -12px 12px var(--blur) 1px rgba(0, 0, 0, 0.02), -13px 13px var(--blur) 1px rgba(0, 0, 0, 0.02), -14px 14px var(--blur) 1px rgba(0, 0, 0, 0.01), -15px 15px var(--blur) 1px rgba(0, 0, 0, 0.01), -16px 16px var(--blur) 1px rgba(0, 0, 0, 0.01);*/
        }
        .border:before {
            content: ' ';
            display: block;
            padding-bottom: 140%;
        }
        .frame {
            left: 3%;
            top: 2.5%;
            box-shadow: inset -1px 1px 6px 1px rgba(0, 0, 0, 0.24);
            width: 94%;
            height: 95%;
            background: white;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            /*padding: 18px;*/
            box-sizing: border-box;
            position: absolute;
        }
        .image {
            box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.2);
            height: 100%;
            width: 100%;
            /*background-size: cover;*/
            /*background-position: center center;*/
        }
        .content-container{
            width: 95%;
            margin: 5%;
            display: flex;
            flex-wrap: wrap;
            justify-content: right;
            align-content:flex-start;
        }
        .img-info{
            width: 100%;
            height: 100%;
            background-color: rgba(255,255,255,0.8);
            position: absolute;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /*align-content: center;*/
            align-items: center;
        }
    </style>
    <style>
        .digital-inputbox{
            position: absolute;
            z-index: 5;
            height: 142px;
            width: 420px;
            background-color: #5D5D5B;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            justify-items: center;
        }
        .avator{
            border:1px solid black;
            height: 40px;
            width: 40px;
            margin: 10px auto;
            border-radius: 100%;
        }
        .info{
            width: 100%;
            text-align: center;
            font-size: 24pt;
            color:#b6c4cf;
        }
    </style>
</head>
<body>
<header>
    <header>
        <nav class="b_clear">
            <div class="nav_logo l_float">
                <img src="imgs/logo.svg" alt="">
            </div>
            <div class="nav_link l_float">
                <ul>
                    <li class="current"><a href="#">我的作品集</a></li>
                    <li><a href="#?type=recommand">推荐</a></li>
                    <c:forEach items="${sessionScope.catgoryEntities}" var="catgory">
                        <li><a href="#?type=${catgory.id}">${catgory.name}</a></li>
                    </c:forEach>
                </ul>
            </div>
            <div class="nav_link r_float">
                <ul>
                    <li><a href="#"><%=(String) session.getAttribute("user") %></a></li>
                    <li><img id="avator" class="avator" src="http://${pageContext.request.getServerName()}:${pageContext.request.getServerPort()}${pageContext.request.contextPath}<%=(String) user.getAvator() %>"/></li>
                </ul>
            </div>
        </nav>
    </header>
</header>
<div class="container">
<%--    六位数字输入框--%>
    <div class="digital-inputbox animated flipInX" style="display: none" id="digital-input">
        <form method="post" action="./MakeCanvasServlet">
            <input type="hidden" name="num" id="num">
        </form>
        <div style="margin-bottom: 12px;color: white">输入相同数字即可进入同一绘图板</div>
        <div id="codeDiv" align="center" style="width: 100%"></div>
    </div>
        <script type="text/javascript">
            verifyCodeDOMUtil.buildCodeModule("codeDiv", "code")
            verifyCode.init("code")

            let object = {
                submit : function (value) {
                    $("#num").val(value);
                    $("form").submit();
                }
            }

            verifyCode.that = object
            verifyCode.onFinish = function (value,that) {
                that.submit(value);
            }
        </script>
    <div class="content-container">
<%--        已有画板列表--%>
    <c:forEach items="${sessionScope.canvas}" var="canvas">
        <div class="border">
            <div class="frame" onmouseover="show_detail(this)" onmouseleave="hide_detail(this)">
                <div class="img-info animated fadeIn" style="display: none;">
                    <div>Name:${canvas.name}</div>
                    <div>Create Date:${canvas.createDate}</div>
                </div>
                <img class="image" src="./imgs/timg.jpg"/>

            </div>
        </div>
    </c:forEach>

<%--        添加画板--%>
        <div class="border" onclick='$("#digital-input").show();'>
            <div class="frame">
                <img class="image" src="./icons/add.svg"/>
            </div>
        </div>
        <div class="info" style="display:none">暂无作品，快去<a href="#">我的作品集</a>创作吧！</div>
    </div>

        <div class="footer">
        <p>Copyright © 2020  事前诸葛亮 <a href="admin/user_administrator.jsp">后台管理</a></p>
        <p>张淋 王宣文 张心雨 江浩</p>
    </div>
</div>
</body>
<script>
    function show_detail(el) {
        $(el).children(".img-info").show();
    }
    function hide_detail(el) {
        $(el).children(".img-info").hide();
    }
</script>
</html>